<template>
  <div class="banner" style="margin-top: 60px">
    <el-row >
      <el-col >
        <el-card style="margin-top: 0px">
<h3 style="text-align: center;margin-top: -2px">如何写好一篇博客</h3>
<div style="margin-top: 10px;text-align: center">

  <p><span style="font-weight: bold">加粗-</span>文章段落中可以使用粗体和其他格式来强调重点</p>

  <p><span style="font-weight: bold">小标题和副标题-</span>在文章中间使用标题能帮助建立清晰的文章结构</p>
  <p style=""> <span style="font-weight: bold">列表-</span>文章在排版时使用列表，可以给人简洁有序的感觉，带有符合和编号的给人的感觉更清晰</p>



  <p><span style="font-weight: bold">文章标题-</span>  一个好的文章，标题对文章阅读有着至关重要的作用 ，所以标题一定需要仔细推敲,精彩有趣的文章</p>
  <p> <span style="font-weight: bold"> 文章内容-</span>先把文章排版和标题做好，内容方面可以慢慢积累,把博客文章写作的门面和框架处理好才是博客文章写作的基础。</p>
  <p><span style="font-weight: bold">简短的段落-</span> 阅读长篇的文章很容易迷失方向。把大段的文章分散成成更容易接受的小段落，你将发现用户会花更多时间阅读你的文章。</p>

</div></el-card>
      </el-col>
    </el-row>


<div style="width: 60%;margin-left: 250px;margin-top: 43px">
  <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in imgs" :key="item">
      <img style="height: 300px;width: 100%" :src="item"/>
    </el-carousel-item>
  </el-carousel>

</div>



</div>
</template>

<script>
  import '../../assets/index.css'
  export default {
    name: 'Dashboard',
    data() {
      return {
        form: {},
        imgs: [
          'https://www.static.talkxj.com/articles/57e40faa1d4b8055bab5cdc246778788.jpg',
          'https://www.static.talkxj.com/articles/961c61a370cce5c0a2b233532bfa4139.png',
          'https://www.static.talkxj.com/articles/f21704d1596d904d78cffd36293573a5.png',
          'https://www.static.talkxj.com/articles/30225075a8dde449d44e77dc1917bc20.jpg',
          'https://personal.business.czxcly.cn/images/3e75fc73-01de-4206-8227-1d3fb25a512a.png'
        ]
      }
    },
    created() {
      let str = sessionStorage.getItem('user')
      this.form = JSON.parse(str)
      if (this.form.nick===''){

        this.$message({
          type:'warning',
          message:'亲爱的用户，请前往个人中心完善信息'
        })


      }
    }

  }
</script>


<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  #main {
    width: 400px;
    height: 400px;

    margin-top: 10px
  }

  .line-wrap {
    width: 200px;
    height: 400px;
  }
</style>
